
<!--<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script> 
<script type="text/javascript" src="__STATIC__/js/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.fileupload1.js" charset="utf-8"></script>-->
<!--<script type="text/javascript" src="__STATIC__/js/jquery.fileupload.js" charset="utf-8"></script>-->
<!-- 图片空间 -->
<div class="picture-dialog">
    <input type="hidden" value="1" id="pic_num">
    <input type="hidden" id="J-choose">
    <input type="hidden" id="J-choose_img">
    <div class="picture-header flex flex-pack-end padding-15">
        <div>
            <a href="javascript:void(0);" class="btn btn-primary" id="createAlbum">创建相册</a>
            <button class="btn btn-info btn-file">上传图片<input id="fileupload" class="fileupload" type="file" name="file_upload" multiple></button>
        </div>
    </div>
    <div class="picture-body">
        <div class="picture-sidebar border-right">
            <div class="list-group album_id" id="album_id">
				<!--{volist name="$category" id="vo"}
                <a href="javascript:void(0)" class="list-group-item album_category {if $vo['album_id'] eq $category_id} active {/if}" data-album_id="{$vo.album_id}">{$vo.album_name}<span class="badge"></span></a>
				{/volist}-->
            </div>
        </div>
        <div class="picture-container">
        	<ul class="album-list clearfix"></ul>
			<input type="hidden" id="pageIndex">

                <!--分页-->
                <div class="page clearfix">
                    <div class="M-box3 m-style fr">
                    </div>
                </div>

	        <input type="hidden" id="selectedData">
        </div>
    </div>
</div>


<script type="text/javascript">
require(['utilAdmin'], function (utilAdmin) { 
    $(function () {
        selectAlbum();
        changedpic(1);
        // imgUpload1();
        // 跳转相册
        $('body').on('click','.album_category',function(){
            $(this).addClass('active').siblings().removeClass('active');
            localStorage.setItem("album_id",$(this).data('album_id'));
            changedpic(1);
        })
        // 点击上传图片
        $('.btn-file').on('click',function(){
            console.log('点击上传图片');
            imgUpload1();
        })
    });

    var storage = new utilAdmin.Storage('session');
	var img_array = new Object();
	img_array["id"] = new Array();
	img_array["path"] = new Array();
	var count = 0;
	var maxCount = 5;


    


    function selectAlbum() {
        var album_id = localStorage.getItem("album_id");
        $.ajax({
            type: "post",
            url: "{:__URL('ADMIN_MAIN/system/albumList')}",
            data : { "page_size" : 0 },
            success: function (data) {
                var html = '';
                if (data["data"].length > 0) {
                    for (var i = 0; i < data["data"].length; i++) {
                        // if(data["data"][i]["album_id"]==album_id){
                        if(i==0){
                            // html += '<option value="' + data["data"][i]["album_id"] + '" selected="selected">' + data["data"][i]["album_name"] + '</option>';
                            html += '<a href="javascript:void(0)" class="list-group-item album_category active" data-album_id="'+ data["data"][i]["album_id"] +'">' + data["data"][i]["album_name"] + '<span class="badge"></span></a>';
                        }else{
                            // html += '<option value="' + data["data"][i]["album_id"] + '">' + data["data"][i]["album_name"] + '</option>';
                            html += '<a href="javascript:void(0)" class="list-group-item album_category" data-album_id="'+ data["data"][i]["album_id"] +'">' + data["data"][i]["album_name"] + '<span class="badge"></span></a>';
                        }
                    }
                }
                $('.album_id').html(html);
                // $("#album_id").html(html);
            }
        });
    }

	//创建相册
	$('#createAlbum').on('click',function(){
        var html = '<form class="form-horizontal padding-15" >';
        html += '<div class="form-group"><label class="col-md-3 control-label">相册名称</label><div class="col-md-8"><input type="text" class="form-control albumName" /></div></div>';
        html += '<div class="form-group"><label class="col-md-3 control-label">排序</label><div class="col-md-8"><input type="text" class="form-control sort" /></div></div>';
        html += '</form>';
        utilAdmin.confirm('创建相册',html,function(){
            var name = this.$content.find('.albumName').val();
            var sort = this.$content.find('.sort').val()
            if(!name){
                // layer.msg('请输入相册名称', {icon: 2, time: 1000});
                utilAdmin.message('内容不能为空');
                return false;
            }
            $.ajax({
                type: "post",
                url: "{:__URL('ADMIN_MAIN/system/addalbumclass')}",
                data : {
                    "album_name" : name,
                    "sort" : sort,
                },
                dataType: "json",
                async : true,
                success : function(data) {
                    // if (data["code"] > 0) {
                    //     util.message(data["message"],'success',LoadingInfo(1,data["code"]));
                    //     $('.album_category').removeClass('active');
                    // }else{
                    //     util.message(data["message"],'danger');
                    // }
                     if (data) {
                        //  layer.msg('创建成功', {icon: 1, time: 1000},function(){
                        //         selectAlbum();
                        //         return true;
                        //  })
                        utilAdmin.message('创建成功','success',selectAlbum())
                     }
                }
            })
        })
	})


    //图片上传
    function imgUpload1() {
        var album_id =$('body').find(".list-group").children('.active').data("album_id");
        console.log(album_id);
        console.log(album_id>0);
        var dataAlbum = {
            "album_id": album_id,
            "type": "1,2,3,4"
        };
        if(album_id>0){
            console.log('我进来了');
            var options = {
                url: "{:__URL('ADMIN_MAIN/upload/uploadFile')}",                    //上传地址
                autoUpload: true,                               //是否自动上传
                acceptFileTypes: /(.|\/)(jpe?g|png)$/i,         //文件格式限制
                maxNumberOfFiles: 1,                            //最大上传文件数目
                maxFileSize: 5000000,                           //文件不超过5M
                sequentialUploads: true,                        //是否队列上传
                dataType: 'json',
				formData:dataAlbum,                                //从服务器返回数据json类型
            };
            utilAdmin.fileuploadPicSpace(options,function(file_url){
                changedpic(1);
            });
        }

        // $('#fileupload').fileupload({
        //     url: "{:__URL('ADMIN_MAIN/upload/uploadFile')}",
        //     dataType: 'json',
        //     formData: dataAlbum,
        //     add: function (e, data) {
        //         data.submit();
        //     },
        //     done: function (e, data) {
        //         var param = JSON.parse(data.result);
        //         if (param.code > 0) {
        //             changedpic(1);
        //         } else {
        //             // layer.msg(param.message, {icon: 2, time: 1000});
        //             message(param.message,'danger');
        //         }
        //     }
        // });
    }
    // function showAlbum(event, count, callback) {
    //     $('#licenseImg').modal('show');
    //     $('#pic_num').val(count);
    //     var pic_dom = $(event).find('.J-pic').attr('id');
    //     $('#selectpic').attr('dom', pic_dom);
    //     $('#selectpic').attr('onclick', callback);
    //     selectAlbum();
    //     changedpic(1);
    // }

    // function choose_pic(event) {
    //     var pic_num = $('#pic_num').val();
    //     var src = $(event).find('img').attr('src');
    //     var pid = $(event).find('img').attr('id');
    //     if (pic_num == 1) {
    //         $(event).siblings('li').removeClass('active');
    //     }
    //     $(event).toggleClass('active');

    //     if (pic_num == 1) {
    //         if (!$(event).hasClass('active')) {
    //             $('#J-choose').val('');
    //             $('#J-choose_img').val('');
    //             return;
    //         }
    //         $('#J-choose').val(pid);
    //         $('#J-choose_img').val(src);
    //     } else {
    //         var choosedId = $('#J-choose').val();
    //         var choosedImg = $('#J-choose_img').val();
    //         var aChoosedId = [];
    //         var aChoosedImg = [];
    //         if (choosedId) {
    //             aChoosedId = choosedId.split(",");
    //         }
    //         if (choosedImg) {
    //             aChoosedImg = choosedImg.split(",");
    //         }
    //         if (!$(event).hasClass('active') && $.inArray(pid.toString(), aChoosedId) >= 0) {
    //             aChoosedId.splice($.inArray(pid.toString(), aChoosedId), 1);
    //             aChoosedImg.splice($.inArray(src, aChoosedImg), 1);
    //         }
    //         $('.J-img').each(function () {
    //             if ($(this).hasClass('active') && $.inArray($(this).find('img').attr('id').toString(), aChoosedId) < 0) {
    //                 aChoosedId.push($(this).find('img').attr('id'));
    //                 aChoosedImg.push($(this).find('img').attr('src'));
    //             }
    //         });
    //         if (aChoosedId.length > pic_num) {
    //             $(event).toggleClass('active');
    //             layer.msg('该区域只能选择' + pic_num + '张图片！', {icon: 7, time: 1000});
    //             return false;
    //         }
    //         choosedId = aChoosedId.join(',');
    //         choosedImg = aChoosedImg.join(',');
    //         $('#J-choose').val(choosedId);
    //         $('#J-choose_img').val(choosedImg);
    //     }
    // }

    /* 切换图片库 */
    function changedpic(page_index) {
        /*
         ** val 表示选中图片库的值
         ** sort 弹出图片库选中筛选排序值
         */
        var album_id = $(".picture-dialog .list-group .active").attr("data-album_id");
        var choosedId = $('#J-choose').val();
        var aChoosedId = [];
        if (choosedId) {
            aChoosedId = choosedId.split(",");
        }
        $('#page_index').val(page_index ? page_index : '1');

        $.ajax({
            type: "post",
            url: "{:__URL('ADMIN_MAIN/system/getalbunpic')}",
            data: {"page_index": page_index, "page_size": $("#showNumber").val(), "album_id": album_id},
            success: function (data) {
                var html = '';
                if (data["data"].length > 0) {
                    for (var i = 0; i < data["data"].length; i++) {
                        var active = '';
                        if ($.inArray(data["data"][i]["pic_id"].toString(), aChoosedId) >= 0) {
                            active = 'active';
                        }
                        // html += '<li class="pull-left J-img ' + active + '" onclick="choose_pic(this)">';
                        // html += '<div><img id="' + data["data"][i]["pic_id"] + '" src="' + __IMG(data["data"][i]["pic_cover"]) + '" alt=""></div>';
                        // html += '<div class="des">' + data["data"][i]["pic_size"] + '</div>';
                        // html += '</li>';
                        html += '<li class="item albumItem" data-path="' + __IMG(data["data"][i]["pic_cover"]) + '" data-id="' + data["data"][i]["pic_id"] + '"><img src="' + __IMG(data["data"][i]["pic_cover"]) + '"></li>';
                    }
                } else {
                    html += '<div class="empty-box">暂无符合条件的数据记录</div>';
                }
                $(".album-list").html(html);
                utilAdmin.page(".M-box3", data['total_count'], data["page_count"], page_index, changedpic);
            }
        });
    }

    //选择图片
    $('.album-list').on('click','.albumItem',function(){
        var id = $(this).data("id").toString();
        var path = $(this).data("path");
        if(storage.getKey('multiple') && storage.getItem('multiple') === '1'){
            //多选图片
            if ($(this).hasClass("active")) {
                // 取消选中
                $(this).removeClass("active");
                var index = $.inArray(id, img_array["id"]);
                img_array["id"].splice(index, 1);
                img_array["path"].splice(index, 1);
                --count;
            } else {
                // 选中图片
                if(count>maxCount-1){
                    utilAdmin.message('最多可选择'+maxCount+'张图片')
                    return false
                }
                $(this).addClass("active");
                img_array["id"].push(id);
                img_array["path"].push(path);
                ++count;
            }
        }else{

            //单选图片
            if($(this).hasClass("active")){
                $(this).removeClass("active");
                img_array["id"] = [];
                img_array["path"] = [];
            }else{
                $(this).addClass("active").siblings().removeClass('active');
                img_array["id"][0] = id;
                img_array["path"][0] = path;
            }
        }

        $('#selectedData').data(img_array)
    })

})
</script>